<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>考神驾到手机站驾考视频详情页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/public.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/windowsheight.js"></script>

    <script src="${pageContext.request.contextPath}/manager_page/layui/layui.js"></script>
</head>

<body>

<input type="hidden" id="video_id_hidden" value=${param.video_id_hidden} >

<!-----------头部开始--------------->
<%@ include file="page_head.jsp"%>
<!-----------头部结束--------------->



<!-----------内容开始--------------->
 <div class="content">
    <div class="width610">
       <div class="biaoti videotitle"><img src="images/video.jpg"><span>视频: <label id="video_title"></label></span></div>
        <div class="videoplayer" id="video_content_div">
           <video controls="controls" id="video_content">
<%--               <source src="${pageContext.request.contextPath}/img_artificial/question_img/f407208d-a4da-442d-aaf6-5f24f7bd9e29_with_kesi1_2.mp4" type="video/mp4" />--%>
<%--               <source src="${pageContext.request.contextPath}/img_artificial/question_img/f407208d-a4da-442d-aaf6-5f24f7bd9e29_with_kesi1_2.ogg" type="video/ogg" />--%>
<%--               <source src="${pageContext.request.contextPath}/img_artificial/question_img/f407208d-a4da-442d-aaf6-5f24f7bd9e29_with_kesi1_2.webm" type="video/webm" />--%>
<%--               <object data="${pageContext.request.contextPath}/img_artificial/question_img/f407208d-a4da-442d-aaf6-5f24f7bd9e29_with_kesi1_2.mp4" id="video_source_5" >--%>
<%--                   <embed src="${pageContext.request.contextPath}/img_artificial/question_img/f407208d-a4da-442d-aaf6-5f24f7bd9e29_with_kesi1_2.swf" id="video_source_4" />--%>
<%--               </object>--%>
           </video>

        </div>

   </div>
   <div class="relative_video">
     <div class="biaoti"><img src="images/libg_06.jpg"><span>相关视频</span></div>
   </div>
   <div class="cargielscon videolist">
       <div style="margin-left: 10px;" id="video_relative_div">
<%--           <div style="border-bottom: #DCDCDC solid 1px;margin-top: 10px;width: 100%;float: left;">--%>
<%--               <a href="javascript:;">--%>
<%--                   <div style="float: left;"><img src="../my_image/ke2_cefantingche_mp4.jpg" width="160" height="90"></div>--%>
<%--                   <div style="float: left;margin-left: 10px;"><label style="font-size: 16px;">视频标题</label></div>--%>
<%--                   <div style="float: left;margin-top: 65px;margin-left: -115px;"><label style="color: #e9e9e9;font-size: 14px;">0:00</label></div>--%>
<%--               </a>--%>
<%--           </div>--%>
       </div>
    </div>
 </div>
 <!-----------内容结束--------------->
<%-- <div class="footer">--%>
<%--   <p>©考神驾到版权所有</p>--%>
<%--   <span>www.kaoshenjiadao.com</span>--%>
<%-- </div>--%>
 
</body>

<script>
    var layer;
    layui.use('layer',function(){
        layer=layui.layer;
    })
    var video_id=$("#video_id_hidden").val();

    window.onload=function(){
        $("#page_head_title").text("视频详情");
        initVideo();
        initVideo_relative();
        changeVideo_size();
    }

    function initVideo(){

        if(video_id!="null"&&video_id!=""){
            $.ajax({
                url:"${pageContext.request.contextPath}/front_video/videodetail_init.do",
                data:{
                    "video_id":video_id
                },
                success:function(data,status){
                    if(status=="success"){
                        $("#video_title").text(data.video_title);
                        $("#video_content").empty();
                        var end_str=["mp4","ogg","webm","swf"];
                        var video_content=data.video_content;
                        var dot_index=video_content.indexOf(".");
                        video_content=video_content.substring(0,dot_index);
                        for(var i=0;i<3;i++){
                            var source=$("<source>").attr({
                                "src":"${pageContext.request.contextPath}/img_artificial/video_file/"+video_content+"."+end_str[i],
                                "type":"video/"+end_str[i]
                            })
                            $("#video_content").append(source);
                        }
                        var object=$("<object></object>").attr({
                            "data":"${pageContext.request.contextPath}/img_artificial/video_file/"+video_content+"."+end_str[0]
                        })
                        var embed=$("<embed>").attr({
                            "src":"${pageContext.request.contextPath}/img_artificial/video_file/"+video_content+"."+end_str[3]
                        })
                        object.append(embed);
                        $("#video_content").append(object);
                    }
                }
            })
        }

    }

    function initVideo_relative(){
        $.ajax({
            url:"${pageContext.request.contextPath}/front_video/video_relative_init.do",
            data:{
                "video_id":video_id
            },
            success:function(data,status){
                if(status=="success"){
                    // <div style="border-bottom: #DCDCDC solid 1px;margin-top: 10px;width: 100%;float: left;">
                    //     <a href="javascript:;">
                    //         <div style="float: left;"><img src="../my_image/ke2_cefantingche_mp4.jpg" width="160" height="90"></div>
                    //         <div style="float: left;margin-left: 10px;"><label style="font-size: 16px;">视频标题</label></div>
                    //         <div style="float: left;margin-top: 65px;margin-left: -115px;"><label style="color: #e9e9e9;font-size: 14px;">0:00</label></div>
                    //     </a>
                    // </div>
                    for(var i=0;i<data.length;i++){
                        var div1=$("<div></div>").attr("style","border-bottom: #DCDCDC solid 1px;margin-top: 10px;width: 100%;float: left;");
                        var a=$("<a></a>").attr("href","javascript:to_jiakao_videodetail("+data[i].video_id+");");
                        var div2=$("<div></div>").attr("style","float: left;");
                        var picPath="${pageContext.request.contextPath}/img_artificial/video_img/";
                        var img=$("<img>").attr({
                            "src":picPath+data[i].video_img,
                            "width":160,
                            "height":90
                        });
                        div2.append(img);
                        var div3=$("<div></div>").attr("style","float: left;margin-left: 10px;");
                        var label1=$("<label></label>").attr("style","font-size: 16px;").text(data[i].video_title);
                        div3.append(label1);
                        var div4=$("<div></div>").attr("style","float: left;margin-top: 65px;margin-left: -115px;");
                        var label2=$("<label></label>").attr("style","color: #e9e9e9;font-size: 14px;").text(data[i].video_length);
                        div4.append(label2);
                        div1.append(div2,div3,div4);
                        a.append(div1);
                        $("#video_relative_div").append(a);
                    }
                }
            }
        })
    }

    function changeVideo_size(){
        var w=$(window).width()*0.95;
        var h=w*0.6;
        $("#video_content").attr({
            "width":w,
            "height":h
        });
    }

    function to_jiakao_videodetail(video_id){
        window.location.href="${pageContext.request.contextPath}/page/jiakao_videodetail.jsp?video_id_hidden="+video_id;
    }

    window.addEventListener("resize", function(){
        changeVideo_size();
    })
</script>







<!--头部高度赋给列表的topjs-->
<script>
   var heighttop=$(".top").height();
   $(".topmenu").css("top",heighttop);
    $(".menumore").toggle(function(){
	     $(".topmenu").show(); 
	   },function(){
	     $(".topmenu").hide(); 
	 	   })
   $(".buttontop").click(function(){
	     $(".topmenu").hide();  
	   })
	   
 $(function(){
	 $(".tasecartop span a").click(function(){
		  var $banktip=$(this).attr("tip");
		  $($banktip).show().siblings().hide();
		  $(".tasecartop span a").removeClass("payaclik");
		  $(this).addClass("payaclik");
		 })
	
	})
 </script>
 
<!--头部高度赋给列表的topjs-->
<!--banner将图片的高度赋给父级扪js-->
<script>
   var heighta=$("#incltialiu li:eq(0) img").height();
   $(".main,.width,#incltialiu").height(heighta) ;
 </script>
 <!--banner将图片的高度赋给父级扪js-->
<!--首页标题点击出现更多分类js-->
 <script>
	$(".titlemore").toggle(function(){
		$(this).parent(".tabtila").siblings(".moresort").show()
		$(this).children("img").attr("src","images/title_692.jpg")
		},function(){
		$(this).parent(".tabtila").siblings(".moresort").hide()
		$(this).children("img").attr("src","images/title_69.jpg")
		})
  </script>
 <!--首页标题点击出现更多分类js-->
</html>
